<script setup>
import {NDataTable, useMessage} from "naive-ui";
import {ref, onMounted} from "vue";
import {EventsOn} from "../../wailsjs/runtime/runtime";
import {pubEvent, subEvent} from "../api/event";

const message = useMessage()
const columns = [
  {
    title: "ID",
    key: "id",
    width: 70,
  }, 
  {
    title: "URL",
    key: "url",
    ellipsis: {
      tooltip: true  // 超出宽度时显示tooltip
    },
    render(row) {
      return `${row.url}`
    }
  },
  {
    title: "应用",
    key: "app",
    width: 160,
  },
  {
    title: "请求方法",
    key: "method",
    width: 80,
  },
  {
    title: "状态",
    key: "completed",
    width: 80,
    render(row) {
      return row.responseCode ? '完成' : '进行中'
    }
  },
  {
    title: "响应码",
    width: 60,
    key: "responseCode",
  },
  {
    title: "请求时间",
    key: "requestTime",
    width: 180,
    render(row) {
      return new Date(row.requestTime).toLocaleString()
    }
  },
  {
    title: "耗时",
    key: "duration",
    width: 90,
    render(row) {
      if (!row.responseTime) return '-'
      const duration = new Date(row.responseTime) - new Date(row.requestTime)
      return `${duration}ms`
    }
  },
];

const rows = ref([]);

// 处理新的代理请求
function handleNewRequest(payload) {
  // console.log(payload)
  let data = JSON.parse(payload)
  rows.value = [...rows.value, {
    id: data.ID,
    scheme: data.Scheme,
    host: data.Host,
    url: data.Url,
    app: data.App || '-',
    method: data.Method,
    responseCode: data.ResponseCode,
    requestTime: data.RequestTime,
    responseTime: data.ResponseTime,
    requestHeader: data.RequestHeader,
    responseHeader: data.ResponseHeader,
    requestBody: data.RequestBody,
    responseBody: data.ResponseBody,
    rawRequest: data.RawRequest,
  }];
}

// 处理请求完成
function handleRequestCompleted(payload) {
  let data = JSON.parse(payload)
  const index = rows.value.findIndex(row => row.id === data.ID);
  if (index !== -1) {
    rows.value[index] = {
      ...rows.value[index],
      responseCode: data.ResponseCode,
      responseTime: data.ResponseTime,
      responseHeader: data.ResponseHeader,
      responseBody: data.ResponseBody,
      rawResponse: data.RawResponse,
    };
  }
}

function rowProps(row) {
  return {
    style: 'cursor: pointer;',
    onClick: () => {
      // message.info(JSON.stringify(row))
      handleRowClick(row)
    }
  }
}
// 修改行点击事件处理
function handleRowClick(row) {
  // 发送请求数据到 RequestView
  pubEvent('update-request', {
    headers: row.requestHeader,
    body: row.requestBody,
    url: row.url,
    raw: row.rawRequest,
  });
  
  // 发送响应数据到 ResponseView
  pubEvent('update-response', {
    headers: row.responseHeader,
    body: row.responseBody,
    raw: row.rawResponse,
  });
}
function selectedRowKeys(key) {
  message.info(key)
}

// 添加清除数据的处理函数
const clearTableData = () => {
  rows.value = [];
}

// 监听事件
onMounted(() => {
  EventsOn("new_proxy_request", handleNewRequest);
  EventsOn("new_proxy_response", handleRequestCompleted);
  subEvent("clear-table-data", clearTableData); // 订阅清除事件
});
</script>

<template>
  <div>
    <n-data-table :columns="columns" :data="rows" size="small" striped 
    :row-props="rowProps"
    />
  </div>
</template>

<style scoped></style>
